<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/wolive.ico"/>
    <title>谈话页面</title>
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/push/pusher.min.js"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    <script src="__script__/main.js?v=3.16"></script>

    <style>
        * {
            -webkit-overflow-scrolling: touch;
        }

        .foot_msg {
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .msg-toolbar {
            width: 80%;
            height: 26px;
            position: relative;
            margin-left: 5px;
        }

        .msg-toolbar a {
            float: left;
            margin-right: 5px;
        }

        .input-but {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;

        }

        .my-circle {
            border-radius: 10px;
        }

        .size {
            min-width: 30px;
            height: 25px;
            line-height: 30px;
            border: none;
        }

        .fileinput {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

        .edit-ipt {
            border: 2px solid #ddd;
            width: 78%;
            outline: none;
            text-indent: 10px;
            border-radius: 6px;
            /*margin-left: 2px;*/
            background-color: #fff;
            padding-top: 6px;
            font-weight: normal;
            font-size: 16px;
            overflow-y: auto;
            height: auto;
            min-height: 32px;
            overflow-x: hidden;
            word-break: break-all;
            font-style: normal;
        }

        .outer-right {
            float: right;
            width: 80%;
            position: relative;
            right: 16%;
            clear: both;
            font-size: 14px;
        }

        .outer-left {
            float: right;
            width: 80%;
            position: relative;
            clear: both;
            right: 5%;
            font-size: 14px;
        }

        .outer-iframe-left {
            float: left;
            position: relative;
            clear: both;
            padding-top: 5px;
        }

        .outer-right:before, .outer-right > i {
            width: 0;
            height: 1px;
            border-width: 6px 7px;
            border-style: dashed solid dashed solid;
            /*border-color: #66afe9 transparent transparent;*/
            border-color: transparent transparent transparent #5FB878;
            _border-color: #fff #19CAA6 #fff #eee;
            font-size: 0;
            line-height: 0;
            content: "";
            position: absolute;
            top: 15px;
            right: -12px;
        }

        .outer-left:before, .outer-left > i {
            width: 0;
            height: 1px;
            border-width: 6px 7px;
            border-style: dashed solid dashed solid;
            border-color: transparent #eee transparent transparent;
            _border-color: #fff #fff #fff #eee;
            font-size: 0;
            line-height: 0;
            content: "";
            position: absolute;
            top: 15px;
            left: -12px;
            left: -11px \9;
            *left: -11px;

        }

        .service {
            /* margin-right: 10px;*/
            margin-top: 5px;
            background-color: #5FB878;
            display: inline-block;
            padding: 10px 10px;
            float: right;
            word-break: break-all;
            word-wrap: break-word;
            color: #fff;;
            border-radius: 3px;
            max-width: 100%;
            box-sizing: border-box;
        }

        .customer {
            margin-top: 5px;
            *margin-top: 10px;
            background-color: #eee;
            display: inline-block;
            padding: 10px 10px;
            float: left;
            word-break: break-all;
            word-wrap: break-word;
            color: #000;
            border-radius: 3px;
            position: relative;
            left: 0px;
            max-width: 100%;
        }

        .chatmsg {
            margin-bottom: 20px;
            position: relative;
        }

        .chatmsg_notice {
            position: relative;
        }

        .chatmsg img {
            max-width: 200px;
            max-height: 200px;
            cursor: pointer;
            border-radius: 3px;
        }

        .chatmsg:after, .chatmsg p {
            content: "";
            display: table;
            clear: both;
        }

        .service-name {
            float: left;
            display: block;
            position: relative;
            font-size: 12px;
            color: #8D8D8D;
        }

        .showtime {
            color: #D2D2D2;
            position: relative;
            margin-bottom: 10px;
            font-size: 12px;
            text-align: center;
            height: 15px;
        }

        .content {
            position: absolute;
            top: 52px;
            width: 100%;
            overflow-y: auto;
            margin: 0;
            bottom: 75px;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .newmsg {
            position: absolute;
            left: 23px;
            top: 10px;
            display: inline-block;
            line-height: 18px;
            color: #0C0C0C;
            text-align: center;
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: #ddd;
        }

        .hide {
            display: none;
        }

        .tool_box {
            width: 100%;
            height: auto;
            position: relative;
            display: none;
            background-color: #fff;
        }

        .wl_faces_main ul {
            margin: 5px 5px;
            overflow: hidden;
            width: 100%;
        }

        .wl_faces_main ul li {
            float: left;
            height: 30px;
            width: 26px;
            text-align: center;

        }

        .wl_faces_main ul li img {
            width: 22px;
            height: 22px;
            padding: 0px;
        }

        .wolive_product_msg {
            display:block;
            width:17rem;
            height:100%;
            position:relative;
        }

        .wolive_product_msg img {
            width: 4.6rem;
            float: left;
            padding: .4rem;
        }

        .wolive_product_msg p {
            clear: none;
        }

        .wolive_product_msg .product_info {
            padding: .4rem  0;
            display: table-cell;
        }

        .wolive_product_msg .product_info .wolive_product_title{
            color: #555;
            font-size: .85rem;
        }

        .wolive_product_msg .product_info .wolive_product_price{
            color: #999;
            font-size: .85rem;
            padding-top: .1rem;
        }

        .wolive_product_msg .product_info .wolive_product_info{
            padding-top: .1rem;
            color: #777;
            font-size: .8rem;
        }

        .no_border .service, .no_border .customer{
            background-color: transparent !important;
            padding: 0 !important;
        }

        .no_border:before {
            content: '' !important;
            display: none;
        }
        .no_border:after {
            content: '' !important;
            display: none;
        }


    </style>
    <script>

        var voice = function() {
            var audio = document.createElement("audio");
            audio.src = '/upload/voice/default.mp3';
            audio.play();
        };

        var config = {
            'app_key': '{$app_key}',
            'web_host': '{$whost}',
            'web_port': '{$wport}',
            'value': '{$value}',
            'business_id': '{$user["business_id"]}',
            'service_id': '{$user["service_id"]}',
            'voice_state': '{$voice}',
            'voice_address': '{$voice_address}'
        };

        var pic = '{$avatar}';
        var imghead = '{$img}';
        var num = 0;
        //标记已看消息
        function getwatch(cha) {
            $.ajax({
                url: "/admin/set/getwatch",
                type: "post",
                data: {visiter_id: cha}
            });
        }

        // new pusher 链接websocket
        var wolive_connect = function () {
            if (config.value == 'true') {
                var pusher = new Pusher(config.app_key, {
                    encrypted: true
                    , enabledTransports: ['wss']
                    , wsHost: config.web_host
                    , wssPort: config.web_port
                    , authEndpoint: '/auth.php'
                    , disableStats: true
                });
            } else {
                var pusher = new Pusher(config.app_key, {
                    encrypted: false
                    , enabledTransports: ['ws']
                    , wsHost: config.web_host
                    , wsPort: config.web_port
                    , authEndpoint: '/auth.php'
                    , disableStats: true
                });
            }

            var value = "{$user['service_id']}";
            var channel = pusher.subscribe("kefu" + value);
            channel.bind("cu-event", function (data) {
                voice();

                var showtime = '';
                if (data.message.visiter_id == "{$data['visiter_id']}") {
                    var msg = '';
                    msg += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div style="position: absolute;left:5px;">';
                    msg += '<img class="my-circle  se_pic" src="' + pic + '" width="40px" height="40px"></div>';
                    var picture_class = is_picture(data.message.content) ? ' no_border' : '';
                    msg += "<div class='outer-left"+picture_class+"'><div class='customer'>";
                    msg += "<pre>" + data.message.content + "</pre>";
                    msg += "</div></div>";
                    msg += "</li>";
                    $('.conversation').append(msg);
                    getwatch(data.message.visiter_id);
                } else {
                    num++;
                    if (num > 0) {
                        $(".newmsg").removeClass('hide');
                    } else {
                        $(".newmsg").addClass('hide');
                    }
                    $(".newmsg").text(num);
                }
                var div = document.getElementById("wrap");
                div.scrollTop = div.scrollHeight;
            });

            channel.bind('logout', function () {
                $("#status").text('离线');
            });

            channel.bind('geton', function () {
                $("#status").text('');
            });


            pusher.connection.bind('state_change', function (states) {
                // states = {previous: 'oldState', current: 'newState'}
                if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {

                    pusher.unsubscribe("kefu" + value);
                    pusher.unsubscribe("all" + all);
                    $.cookie("hid", '');
                    wolive_connect();
                }

            });

            pusher.connection.bind('connected', function () {
                $(".chatmsg").remove();
                $.cookie('hid', '');
                getdata();
            });
        }
    </script>
</head>
<body>
<header style="width: 100%;height: 47px;background: #3c3c3c;color: #fff9ec;position:absolute;line-height: 45px;">
    <span class="newmsg hide"></span>
    <i class="layui-icon" style="position: absolute;left:10px;font-size: 20px;" onclick="back()">&#xe603;</i>
    <span id="customer"
          style="position:absolute;left:40%;font-size: 18px;font-weight: bold;">{$data.visiter_name}</span><span
        id="status"></span>
</header>
<section class="content" id="wrap" style="background:url({$group.bg}) no-repeat;background-size: 100%;">
    <ul class="conversation">
    </ul>
</section>
<footer style="position:absolute;bottom:0px;width: 100%;height: auto;padding:0">
    <div class="tool_box">
        <div class="wl_faces_content">
            <div class="wl_faces_main">
            </div>
        </div>
    </div>
    <div class="foot_msg">
        <div class="msg-toolbar">
            <a id="face_icon" href="javascript:" onclick="faceon()"><i class="layui-icon" style="font-size: 26px;">
                &#xe60c;</i></a>

            <a id="video" style="cursor: pointer;" onclick="getvideo()"><i class="layui-icon"
                                                                           style="font-size: 26px;">&#xe6ed;</i></a>

            {if $atype == 'open'}
            <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>
            {/if}


            <a id="images" href="javascript:">
                <form id="picture" enctype="multipart/form-data">
                    <div class="layui-box input-but  size">
                        <input type="file" name="upload" class="fileinput" onchange="put()"/>
                        <i class="layui-icon" style="font-size: 30px;">&#xe60d;</i>
                    </div>
                </form>
            </a>

            <a id="files" href="javascript:">
                <form id="file" enctype="multipart/form-data">
                    <div class="layui-box input-but  size">
                        <input type="file" name="folder" class="fileinput" onchange="putfile()"/>
                        <i class="layui-icon" style="font-size: 25px;">&#xe61d;</i>
                    </div>
                </form>
            </a>

            <a id="getblack" href="javascript:" onclick="getblack()"><i class="layui-icon" style="font-size: 26px;">
                &#x1007;</i></a>
            <a id="getswitch" href="javascript:" onclick="getswitch()"><i class="layui-icon" style="font-size: 26px;">
                &#xe613;</i></a>

        </div>

        <div class="footer">
            <input type="text" id="text_all" class="layui-input" style="margin:5px;width:80%"/>
            <button class="layui-btn layui-btn-normal" style="position: absolute;right:5px;bottom:5px;width:17%"
                    onclick="send()">发送
            </button>
        </div>
    </div>
</footer>
<script>
    var se = '{$se.nick_name}';
    var visiter_id = '{$data.visiter_id}';
    var img = '{$data.avatar}';

    // 视频通话
    var getvideo =function(){

        var sid = $('#channel').text();

        var videourl = "https://v.zyllaw.hk:9988/room.php?cid=" + visiter_id;
        $("#text_all").val(videourl);
        send();
        window.open(videourl);


//        var pic = $("#se_avatar").attr('src');
//
//        var times = (new Date()).valueOf();
//        var se = $("#se").text();
//        //申请
//        $.ajax({
//            url: '/admin/set/apply',
//            type: 'post',
//            data: {id: sid,channel: times,avatar:pic,name:se},
//            success:function(res){
//                if(res.code !=0){
//                    layer.msg(res.msg,{icon:2,offset:'20px'});
//                }else{
//
//                    var str='';
//                    str+='<div class="videos">';
//                    str+='<video id="localVideo" autoplay></video>';
//                    str+='<video id="remoteVideo" autoplay class="hidden"></video></div>';
//
//
//                      layer.open({
//                          type:1
//                          ,title: '视频'
//                          ,shade:0
//                          ,closeBtn:1
//                          ,area: ['440px', '378px']
//                          ,content:str
//                          ,end:function(){
//
//
//                             mediaStreamTrack.getTracks().forEach(function (track) {
//                                track.stop();
//                            });
//
//                          }
//                    });
//
//
//                     try{
//                         connenctVide(times);
//                     }catch(e){
//                         console.log(e);
//                         return;
//                     }
//
//                }
//            }
//
//        });


    }

    var getaudio =function(){

        //音频先加载
        var audio_context;
        var recorder;
        var wavBlob;
        //创建音频
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            window.URL = window.URL || window.webkitURL;
            audio_context = new AudioContext;

            if (!navigator.mediaDevices) {
                layui.layer.msg('语音创建失败');
            }
        } catch (e) {
            show_user_media_error(e);
            return;
        }
        navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
            var input = audio_context.createMediaStreamSource(stream);
            recorder = new Recorder(input);

            var falg = window.location.protocol;
            if (falg == 'https:') {
                recorder && recorder.record();

                //示范一个公告层
                layui.use(['jquery', 'layer'], function () {
                    var layer = layui.layer;

                    layer.msg('录音中...', {
                        icon: 16
                        , shade: 0.01
                        , skin: 'layui-layer-lan'
                        , time: 0 //20s后自动关闭
                        , btn: ['发送', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            recorder && recorder.stop();
                            recorder && recorder.exportWAV(function (blob) {
                                wavBlob = blob;
                                var fd = new FormData();
                                var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                fd.append('wavName', wavName);
                                fd.append('file', wavBlob);

                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState == 4 && xhr.status == 200) {
                                        jsonObject = JSON.parse(xhr.responseText);

                                        voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="'+jsonObject.data.src+'"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';
                                        var content = 'voice('+jsonObject.data.src+')';

                                        var sid = $('#channel').text();
                                        var pic = typeof imghead != 'undefined' && imghead ? imghead : $("#se_avatar").attr('src');
                                        var time;

                                        var sdata = $.cookie('cu_com');

                                        if (sdata) {
                                            var json = $.parseJSON(sdata);
                                            var img = json.avater;

                                        }

                                        if($.cookie("time") == ""){
                                            time = get_time();
                                            var timestamp = Date.parse(new Date());
                                            $.cookie("time",timestamp/1000);

                                        }else{

                                            var timestamp = Date.parse(new Date());

                                            var lasttime =$.cookie("time");
                                            if((timestamp/1000 - lasttime) >30){
                                                time = get_time(timestamp);
                                            }else{
                                                time ="";
                                            }

                                            $.cookie("time",timestamp/1000);
                                        }

                                        var str = '';
                                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                        str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                        str += "<div class='outer-right'><div class='service'>";
                                        str += "<pre>" +  voicemessage + "</pre>";
                                        str += "</div></div>";
                                        str += "</li>";

                                        $(".conversation").append(str);
                                        $("#text_in").empty();

                                        var div = document.getElementById("wrap");
                                        div.scrollTop = div.scrollHeight;

                                        $.ajax({
                                            url: "/admin/set/chats",
                                            type: "post",
                                            data: {visiter_id: sid || visiter_id,content:  content, avatar: img}
                                        });
                                    }
                                };
                                xhr.open('POST', '/admin/event/uploadVoice');
                                xhr.send(fd);
                            });
                            recorder.clear();
                            layer.close(index);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            recorder && recorder.stop();
                            recorder.clear();
                            audio_context.close();
                            layer.close(index);
                        }
                    });

                });
            } else {
                layer.msg('音频输入只支持https协议！');
            }
        }).catch(function (e) {
            show_user_media_error(e);
        });
    };

    var getstate = function (obj) {

        var c = obj.children[0];

        var type = 'mp3';
        var url = $(c).attr('src');
        if (/\.amr$/.test(url)) {
            type = 'amr';
            if (!obj.c) {
                obj.c = new BenzAMRRecorder();
                obj.c.initWithUrl(url).then(function () {
                    getstate(obj);
                });
                obj.c.onEnded(function () {
                    $(obj).attr('data', 'play');
                    $(obj).find('i').html("&#xe652;");
                });
                return;
            } else {
                c = obj.c;
            }
        }

        var state = $(obj).attr('data');

        if (state == 'play') {
            c.play();
            $(obj).attr('data', 'pause');
            $(obj).find('i').html("&#xe651;");

        } else if (state == 'pause') {
            c.pause();
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");
        }

        if (type != 'amr') {
            c.addEventListener('ended', function () {
                $(obj).attr('data', 'play');
                $(obj).find('i').html("&#xe652;");
            }, false);
        }
    };

    //轉接
    var getswitch = function () {
        layer.open({
            type: 2,
            title: '客服列表',
            area: ['300px', '400px'],
            shade: false,
            content: '/admin/index/service?visiter_id=' + visiter_id + '&name=' + se
        });
    };

    //拖到黑名单
    function getblack() {
        $.ajax({
            url: "/admin/set/blacklist",
            type: "post",
            data: {
                visiter_id: visiter_id
            },
            success: function (res) {
                layer.msg("已拖入黑名单", {offset: "20px"});
            }
        });
    }

    var back = function () {
        history.go(-1);
    }

    var init = function () {
        // 获取历史消息
        $.cookie("hid", '');
        getwatch(visiter_id);
        wolive_connect();
    }


    function getdata() {

        var showtime = "";
        var curentdata = new Date();
        var time = curentdata.toLocaleDateString();

        if ($.cookie("hid") != "") {
            var cid = $.cookie("hid");
        } else {
            var cid = "";

        }
        $.ajax({
            url: "/admin/set/chatdata",
            type: "post",
            data: {visiter_id: visiter_id, hid: cid},
            success: function (res) {

                //添加 最近的 聊天 记录
                if (res.code == 0) {
                    var str = '';
                    if (!res.data.length) {
                        return;
                    }
                    $.each(res.data, function (k, v) {
                        showtime = "";
                        if(!getdata.puttime || v.timestamp - getdata.puttime > 60) {
                            var myDate = new Date(v.timestamp * 1000);
                            var puttime = myDate.toLocaleDateString();
                            if (puttime == time) {
                                showtime = get_time(v.timestamp * 1000);
                            } else {
                                showtime = get_date(v.timestamp * 1000);
                            }
                        }

                        getdata.puttime = v.timestamp;

                        var picture_class = is_picture(v.content) ? ' no_border' : '';
                        if (v.direction == 'to_service') {


                            str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div class="" style="position: absolute;left:5px;">';
                            str += '<img class="my-circle  se_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                            str += "<div class='outer-left"+picture_class+"'><div class='customer'>";
                            str += "<pre>" + v.content + "</pre>";
                            str += "</div></div>";
                            str += "</li>";

                        } else {

                            str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div>';
                            str += '<div class="" style="position: absolute;top: 26px;right: 5px;"><img  class="my-circle cu_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                            str += "<div class='outer-right"+picture_class+"'><div class='service'>";
                            str += "<pre>" + v.content + "</pre>";
                            str += "</div></div>";
                            str += "</li>";


                        }
                    });

                    var div = document.getElementById("wrap");
                    if ($.cookie("hid") == "") {

                        $(".conversation").append(str);
                        if (div) {
                            div.scrollTop = div.scrollHeight;
                        }
                    } else {

                        $(".conversation").prepend(str);
                        if (res.length <= 2) {
                            $("#top_div").remove();
                            $(".conversation").prepend("<div id='top_div' class='showtime'>已没有数据</div>");
                            if (div) {
                                div.scrollTop = 0;
                            }
                        } else {
                            if (div) {
                                div.scrollTop = div.scrollHeight / 3;
                            }
                        }
                    }

                    if (res.data.length > 2) {


                        $.cookie("hid", res.data[0]['cid']);
                        $(".chatmsg_notice").remove();
                    }

                }

            }
        });
    }

    window.onload = init();


    var e = {
        '羊驼': 'emo_01',
        '神马': 'emo_02',
        '浮云': 'emo_03',
        '给力': 'emo_04',
        '围观': 'emo_05',
        '威武': 'emo_06',
        '熊猫': 'emo_07',
        '兔子': 'emo_08',
        '奥特曼': 'emo_09',
        '囧': 'emo_10',
        '互粉': 'emo_11',
        '礼物': 'emo_12',
        '微笑': 'emo_13',
        '嘻嘻': 'emo_14',
        '哈哈': 'emo_15',
        '可爱': 'emo_16',
        '可怜': 'emo_17',
        '抠鼻': 'emo_18',
        '吃惊': 'emo_19',
        '害羞': 'emo_20',
        '调皮': 'emo_21',
        '闭嘴': 'emo_22',
        '鄙视': 'emo_23',
        '爱你': 'emo_24',
        '流泪': 'emo_25',
        '偷笑': 'emo_26',
        '亲亲': 'emo_27',
        '生病': 'emo_28',
        '太开心': 'emo_29',
        '白眼': 'emo_30',
        '右哼哼': 'emo_31',
        '左哼哼': 'emo_32',
        '嘘': 'emo_33',
        '衰': 'emo_34',
        '委屈': 'emo_35',
        '呕吐': 'emo_36',
        '打哈欠': 'emo_37',
        '抱抱': 'emo_38',
        '怒': 'emo_39',
        '问号': 'emo_40',
        '馋': 'emo_41',
        '拜拜': 'emo_42',
        '思考': 'emo_43',
        '汗': 'emo_44',
        '打呼': 'emo_45',
        '睡': 'emo_46',
        '钱': 'emo_47',
        '失望': 'emo_48',
        '酷': 'emo_49',
        '好色': 'emo_50',
        '生气': 'emo_51',
        '鼓掌': 'emo_52',
        '晕': 'emo_53',
        '悲伤': 'emo_54',
        '抓狂': 'emo_55',
        '黑线': 'emo_56',
        '阴险': 'emo_57',
        '怒骂': 'emo_58',
        '心': 'emo_59',
        '伤心': 'emo_60'
    };

    var faceon = function () {
        $(".wl_faces_main").empty();
        var str = ""
        str += '<ul>';
        str += '<li><img title="羊驼" src="/upload/emoji/emo_01.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="神马" src="/upload/emoji/emo_02.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="浮云" src="/upload/emoji/emo_03.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="给力" src="/upload/emoji/emo_04.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="围观" src="/upload/emoji/emo_05.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="威武" src="/upload/emoji/emo_06.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="熊猫" src="/upload/emoji/emo_07.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="兔子" src="/upload/emoji/emo_08.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="奥特曼" src="/upload/emoji/emo_09.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="囧" src="/upload/emoji/emo_10.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="互粉" src="/upload/emoji/emo_11.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="礼物" src="/upload/emoji/emo_12.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="微笑" src="/upload/emoji/emo_13.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="嘻嘻" src="/upload/emoji/emo_14.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="哈哈" src="/upload/emoji/emo_15.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="可爱" src="/upload/emoji/emo_16.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="可怜" src="/upload/emoji/emo_17.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="抠鼻" src="/upload/emoji/emo_18.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="吃惊" src="/upload/emoji/emo_19.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="害羞" src="/upload/emoji/emo_20.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="调皮" src="/upload/emoji/emo_21.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="闭嘴" src="/upload/emoji/emo_22.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="鄙视" src="/upload/emoji/emo_23.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="爱你" src="/upload/emoji/emo_24.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="流泪" src="/upload/emoji/emo_25.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="偷笑" src="/upload/emoji/emo_26.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="亲亲"  src="/upload/emoji/emo_27.gif"  onclick="emoj(this)"/></li>';
        str += '<li><img title="生病" src="/upload/emoji/emo_28.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="太开心" src="/upload/emoji/emo_29.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="白眼" src="/upload/emoji/emo_30.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="右哼哼" src="/upload/emoji/emo_31.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="左哼哼" src="/upload/emoji/emo_32.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="嘘" src="/upload/emoji/emo_33.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="衰" src="/upload/emoji/emo_34.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="委屈" src="/upload/emoji/emo_35.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="呕吐" src="/upload/emoji/emo_36.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="打哈欠" src="/upload/emoji/emo_37.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="抱抱" src="/upload/emoji/emo_38.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="怒" src="/upload/emoji/emo_39.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="问号" src="/upload/emoji/emo_40.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="馋" src="/upload/emoji/emo_41.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="拜拜" src="/upload/emoji/emo_42.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="思考" src="/upload/emoji/emo_43.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="汗" src="/upload/emoji/emo_44.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="打呼" src="/upload/emoji/emo_45.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="睡" src="/upload/emoji/emo_46.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="钱" src="/upload/emoji/emo_47.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="失望" src="/upload/emoji/emo_48.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="酷" src="/upload/emoji/emo_49.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="好色" src="/upload/emoji/emo_50.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="生气" src="/upload/emoji/emo_51.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="鼓掌" src="/upload/emoji/emo_52.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="晕" src="/upload/emoji/emo_53.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="悲伤" src="/upload/emoji/emo_54.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="抓狂" src="/upload/emoji/emo_55.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="黑线" src="/upload/emoji/emo_56.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="阴险" src="/upload/emoji/emo_57.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="怒骂" src="/upload/emoji/emo_58.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="心" src="/upload/emoji/emo_59.gif" onclick="emoj(this)"/></li>';
        str += '<li><img title="伤心" src="/upload/emoji/emo_60.gif" onclick="emoj(this)"/></li>';
        str += "</ul>";
        $(".wl_faces_main").append(str);
        $(".tool_box").toggle();
    };

    $(document).on('click', function(e){
        if ($(e.target).parents('#face_icon').length || $(e.target).parents('.tool_box').length) return;
        if ($('.tool_box').css('display') == 'block') {
            $('.tool_box').hide();
        }
    });


    var emoj = function (obj) {
        var a = $(obj).attr("title");
        var str = $("#text_all").val();
        var reg = new RegExp('<', "g")
        str = str.replace(reg, '&lt;');

        var reg2 = new RegExp('>', "g")

        str = str.replace(reg2, '&gt;');
        var b = "";
        b += str + " face[" + a + "]";
        $("#text_all").val(b);
        $(".tool_box").hide()

    }

    // 图片上传
    function put() {

        var value = $('input[name="upload"]').val();
        var index1 = value.lastIndexOf(".");
        var index2 = value.length;
        var suffix = value.substring(index1 + 1, index2);
        var debugs = suffix.toLowerCase();

        if (debugs == "jpg" || debugs == "gif" || debugs == "png" || debugs == "jpeg") {

            $("#picture").ajaxSubmit({
                url: '/admin/set/upload',
                type: "post",
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {

                        var msg = '<img src="' + res.data + '" onclick="getbig(this)" >';

                        var content = '![]('+res.data+')';

                        var se = $("#chatmsg_submit").attr('name');
                        var customer = $("#customer").text();
                        var time;

                        if ($.cookie("time") == "") {
                            time = get_time();
                            var timestamp = Date.parse(new Date());
                            $.cookie("time", timestamp / 1000);

                        } else {

                            var timestamp = Date.parse(new Date());

                            var lasttime = $.cookie("time");
                            if ((timestamp / 1000 - lasttime) > 30) {
                                time = get_time(timestamp);
                            } else {
                                time = "";
                            }

                            $.cookie("time", timestamp / 1000);

                        }
                        var str = '';
                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                        str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + imghead + '" width="50px" height="50px"></div>';
                        var picture_class = is_picture(msg) ? ' no_border' : '';
                        str += "<div class='outer-right"+picture_class+"'><div class='service'>";
                        str += "<pre>" + msg + "</pre>";
                        str += "</div></div>";
                        str += "</li>";

                        $(".conversation").append(str);
                        $('input[name="upload"]').val('');
                        var div = document.getElementById("wrap");
                        div.scrollTop = div.scrollHeight;

                        $.ajax({
                            url: "/admin/set/chats",
                            type: "post",
                            data: {visiter_id: visiter_id, content: content, avatar: img},
                            success: function (res) {
                                if (res.code != 0) {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });

        } else {

            layer.msg("请选择图片", {icon: 2});
        }
    }


    // 文件上传
    function putfile() {

        var value = $('input[name="folder"]').val();
        var sarr = value.split('\\');
        var name = sarr[sarr.length - 1];
        var arr = value.split(".");

        if (arr[1] == "js" || arr[1] == "css" || arr[1] == "html" || arr[1] == "php") {
            layer.msg("不支持该格式的文件", {icon: 2});

        } else {

            var time = get_time();

            $("#file").ajaxSubmit({
                url: '/admin/set/uploadfile',
                type: 'post',
                datatype: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        var str = '';
                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                        str += '<div class="" style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + imghead + '" width="40px" height="40px"></div>';
                        str += "<div class='outer-right'><div class='service'>";
                        str += "<pre><div>";
                        str += "<a href='" + res.data + "' style='display: inline-block;text-align: center;min-width: 70px;text-decoration: none;' download='" + name + "'><i class='layui-icon' style='font-size: 60px;'>&#xe61e;</i><br>" + name + "</a>";
                        str += "</div></pre>";
                        str += "</div></div>";
                        str += "</li>";

                        $(".conversation").append(str);
                        var div = document.getElementById("wrap");
                        $('input[name="folder"]').val('');
                        div.scrollTop = div.scrollHeight;

                        var msg = "<div><a href='" + res.data + "' style='display: inline-block;text-align: center;min-width: 70px;text-decoration: none;' download='" + name + "'><i class='layui-icon' style='font-size: 60px;'>&#xe61e;</i><br>" + name + "</a></div>";
                        var content = 'file['+name+']('+res.data+')';

                        var sid = $('#channel').text();
                        var se = $("#chatmsg_submit").attr('name');
                        var customer = $("#customer").text();
                        $.ajax({
                            url: "/admin/set/chats",
                            type: "post",
                            data: {visiter_id: visiter_id, content: content, avatar: img}
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }

                }
            });

        }
    }


    //发送消息
    var send = function () {
        //获取 游客id
        var msg = $("#text_all").val();
        var content = msg;
        msg = htmlspecialchars(msg);

        if (msg.indexOf("face[") != -1) {

            msg = msg.replace(/face\[([^\s\[\]]+?)\]/g, function (i) {
                var a = i.replace(/^face/g, "");
                a = a.replace('[', '');
                a = a.replace(']', '');
                return '<img src="/upload/emoji/' + e[a] + '.gif"/>'
            });

        }

        if (msg == "") {
            layer.msg('请输入信息');
        } else {

            var se = $("#chatmsg_submit").attr('name');
            var customer = $("#customer").text();
            var time;

            if ($.cookie("time") == "") {
                time = get_time();
                var timestamp = Date.parse(new Date());
                $.cookie("time", timestamp / 1000);

            } else {

                var timestamp = Date.parse(new Date());

                var lasttime = $.cookie("time");
                if ((timestamp / 1000 - lasttime) > 30) {
                    time = get_time(timestamp);
                } else {
                    time = "";
                }

                $.cookie("time", timestamp / 1000);

            }

            var str = '';
            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
            str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + imghead + '" width="40px" height="40px"></div>';
            var picture_class = is_picture(msg) ? ' no_border' : '';
            str += "<div class='outer-right"+picture_class+"'><div class='service'>";
            str += "<pre>" + msg + "</pre>";
            str += "</div></div>";
            str += "</li>";

            $(".conversation").append(str);
            $("#text_all").val('');


            var div = document.getElementById("wrap");
            div.scrollTop = div.scrollHeight;

            $.ajax({
                url: "/admin/set/chats",
                type: "post",
                data: {visiter_id: visiter_id, content: content, avatar: img}
            });

            window.scroll(0,0);
        }
    }

    document.getElementById("wrap").onscroll = function () {
        var t = document.getElementById("wrap").scrollTop;
        if (t == 0) {
            if ($.cookie("hid") != "") {
                console.log(t);
                getdata();
            }
        }
    }

    /*function getbig(obj) {
        var text = $(obj).attr('src');
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            area: '70%',
            shadeClose: true,
            content: "<img src='" + text + "' width='100%' height='100%'>"
        });
    }*/

    $(function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/webrtc/recorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    });

    $(function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/audio/BenzAMRRecorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    });

</script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">


    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg" src="{$group.bg}" ></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>

</body>
</html>